<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./lib/gc.spread.sheets.13.0.0.css"> -->
  <link rel="stylesheet" href="./css/gc.spread.sheets.11.0.0.css">
  <link rel="stylesheet" href="../assets/css/style.css">
  <link rel="stylesheet" href="../build/common/base.css">
  <link rel="stylesheet" href="../build/form/form.css">
  <link rel="stylesheet" href="../build/form/page.css">
  <link rel="stylesheet" href="../build/form/preview.css">
  <script type="text/javascript" src="../build/common/base.js"></script>
  <script type="text/javascript" src="../build/common/vueEdit.js"></script>


  <style>
    * {
      margin: 0;
      padding: 0
    }

    li {
      list-style: none
    }

    img {
      vertical-align: top;
      border: none
    }

    .rev_file {
      width: 53px;
      height: 33px;
      position: relative;
    }

    .btn_rev {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .fun_box {
      display: flex;
      margin: 15px;

    }

    .my_btns {
      margin-left: 15px;
      width: 53px;
      height: 33px;
    }

    .title {
      border-bottom: 1px #ccc dashed;
      text-align: center;
      font-size: 20px;
      padding-bottom: 20px;
      padding-top: 20px;
      margin-bottom: 20px;
    }

    .execl_box {
      margin: 0 auto;
      padding: 20px;
      margin-bottom: 60px;
    }

    .btn_box {
      display: flex;
      margin-bottom: 20px;
    }

    .btn_file_box {
      position: relative;
      margin-right: 5px;
    }

    .file_up {
      position: absolute;
      top: 0;
    }

    #importUrl {
      z-index: 999;
      opacity: 0;
    }

    .my_name {
      max-width: 230px;
      margin-bottom: 20px;
      margin-left: 8px;
      border-radius: 5px;
    }

    .tab_th tbody th {
      text-align: right;
    }

    .my_table thead th {
      white-space: nowrap;
    }

    /* input[type=file] {
      display: none;
    } */
    .uplad_box input[type=file] {
      display: none;
    }

    .no_data {
      width: 100%;
      padding: 8px;
      background-color: #f9f9f9;
      text-align: center;

    }

    #barcon {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 16px;
    }

    /* #barcon a {
      
    } */
  </style>
</head>

<body>

  <div id="app" style="padding: 30px;">

    <!-- <div>
      <el-upload name="预算单" class="upload-demo" drag action="https://127.0.0.1:18084/project/upload" multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </div> -->
    <div style="width: 50%;">




    </div>




  </div>
  <div>
    <div id="div1"></div>
    <div class="title">
      预算清单导入
    </div>
    <div class="execl_box">
      <div>
        <div class="btn_box">
          <a id="comeRevenue" class="btn btn-primary btn-sm mr5 btn-outline">
            <i class="fa fa-edit mr5"></i>
            导出</a>
          <div class="btn_file_box">
            <input class="file_up" type="file" id="importUrl" placeholder="Export file name" />
            <a id="addRevenue" class="file_up btn btn-primary btn-sm mr5 btn-outline">
              <i class=" fa fa-edit mr5"></i>
              添加预算单</a>
          </div>
          <a id="sub" class="btn btn-primary btn-sm btn-outline">提交</a>
        </div>
        <div>
          <span>请输入导出名字:</span><input class="form-control ab-valid my_name" type="text" id="exportFileName"
            value="这是一个excel.xlsx" />
        </div>
      </div>

      <div id="ss" style="height: 600px;width: 100%;"></div>
    </div>

  </div>





  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="./lib/FileSaver.js"></script>
  <!-- <script src="./lib/gc.spread.sheets.all.13.0.0.min.js"></script> -->
  <script src="./scripts/gc.spread.sheets.all.11.0.0.min.js"></script>

  <!-- <script src="./lib/gc.spread.excelio.13.0.0.min.js"></script> -->
  <script src="./scripts/gc.spread.excelio.11.0.0.min.js"></script>
  <script src="./scripts/gc.spread.sheets.print.11.0.0.min.js"></script>

  <!-- <script src="./lib/gc.spread.sheets.migration.13.0.0.min.js"></script> -->

  <script src="./scripts/gc.spread.sheets.resources.zh.11.0.0.min.js"></script>
  <!-- <script src="./lib/gc.spread.sheets.resources.zh.13.0.0.min.js"></script> -->
  <script>







    function getCellsValue(activeSheet) {
      var json = [];
      var colCount = activeSheet.getColumnCount()
      var rowCount = activeSheet.getRowCount();

      for (var row = 0; row < rowCount; row++) {
        for (var col = 0; col < colCount; col++) {
          var cellValue = activeSheet.getValue(row, col);
          if (!cellValue) {
            cellValue = activeSheet.getText(row, col);
          }
          let index = row + '.' + col;
          json.push({
            index: index,
            value: cellValue
          });
        }
      }

      return json;
    }
    $(function () {
      window.addEventListener("resize", resizeCanvas, false);
      function resizeCanvas() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
      }


      $("#importUrl").css("width", $("#addRevenue").outerWidth())
      $(".btn_file_box").css("width", $("#addRevenue").outerWidth())
      // $(".my_name").css("height", $("#addRevenue").outerHeight())
    })
    $(document).ready(function () {
      //依赖
      $.support.cors = true;
      workbook = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
      excelIO = new GC.Spread.Excel.IO();
      sheet = workbook.getActiveSheet();
      // sheet.suspendPaint();
      var newArr = []
      var aarr = []
      $("#sub").click(function () {
        var arr = getCellsValue(workbook.getActiveSheet())
        console.log("解析的表格数据", arr)
      })

      var fils;

      //导入
      $("#importUrl").change(function () {
        console.log(this.files);
        fils = this.files[0];
        ImportFile()
      });
      function ImportFile() {
        var excelFile = fils;
        excelIO.open(excelFile, function (json) {
          var workbookObj = json;
          workbook.fromJSON(workbookObj);
          console.log("?/", json)
        }, function (e) {
          console.log(e, "格式错误");
        });
      }
      document.getElementById("addRevenue").onclick = function () {
        ImportFile()
      };
      //导出
      $("#comeRevenue").click(function () {
        ExportFile()
      });
      function ExportFile() {
        //获取导出文件的名字
        var fileName = $("#exportFileName").val();
        if (fileName.substr(-5, 5) !== '.xlsx') {
          fileName += '.xlsx';
        }
        var jsStr = workbook.toJSON();
        var json = JSON.stringify(workbook.toJSON());
        console.log("josn===", jsStr);
        excelIO.save(json, function (blob) {
          saveAs(blob, fileName);
        }, function (e) {
          if (e.errorCode === 1) {
            alert(e.errorMessage);
          }
        });
      }
    });
    function LoadSpread(json) {
      jsonData = json;
      workbook.fromJSON(json);
      workbook.setActiveSheet("Revenues (Sales)");
    }
  </script>
</body>

</html>